<template>
    <div class="top-right-btn" :style="style">
        <el-row>
            <el-tooltip v-if="search" class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'"
                placement="top">
                <el-button circle icon="Search" @click="toggleSearch()" />
            </el-tooltip>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const props = defineProps({
    showSearch: {
        type: Boolean,
        default: true,
    },
    search: {
        type: Boolean,
        default: true,
    },
    gutter: {
        type: Number,
        default: 10,
    },
});

const emits = defineEmits(['update:showSearch']);

const style = computed(() => {
    const ret: any = {};
    if (props.gutter) {
        ret.marginRight = `${props.gutter / 2}px`;
    }
    return ret;
});

// 搜索
function toggleSearch() {
    emits('update:showSearch', !props.showSearch);
}

</script>

<style lang="scss" scoped>
.top-right-btn{
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
}
:deep(.el-transfer__button) {
    border-radius: 50%;
    display: block;
    margin-left: 0px;
}

:deep(.el-transfer__button:first-child) {
    margin-bottom: 10px;
}

.my-el-transfer {
    text-align: center;
}
</style>
